<template>
  <div class="cinema-Add">
    <el-card class="box-card">
      <div slot="header" class="header">
        <span>添加影院</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 级联 -->
        <el-form-item label="城市区域">
          <cascadeCinema :clearAdd="clearAdd" @getData='getData'></cascadeCinema>
        </el-form-item>
        <el-form-item label="城市编号">
          <el-input v-model="form.cityId" disabled  placeholder="城市编号"></el-input>
        </el-form-item>
        <el-form-item label="地区编号">
          <el-input v-model="form.areaId" disabled placeholder="地区编号"></el-input>
        </el-form-item>
        <el-form-item label="影院名称">
          <el-input v-model="form.name" placeholder="影院名称"></el-input>
        </el-form-item>
        <el-form-item label="影院地址">
          <el-input v-model="form.address" placeholder="影院地址"></el-input>
        </el-form-item>
        <el-form-item label="最低价格">
          <el-input v-model="form.lowPrice" placeholder="最低价格"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">立即创建</el-button>
          <el-button @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import cascadeCinema from "@/components/cascade/cascadeCinema";
export default {
  components: {
    cascadeCinema
  },
  data() {
    return {
      form: {       
       
        cityId: "",
        cityName: "",
        areaId: "",        
        // name: "",
        address: "",
        lowPrice: ""
        ,areaName:""
      },
      loading:false,
      // clearAdd:false
      clearAdd:[]
    };
  },
  created() {

  },
  methods: {
    //清除数据
    clear(){
      // this.clearAdd=true
      this.clearAdd=[]

      this.form={
         cityId: "",
        cityName: "",
        areaId: "",        
        // name: "",
        address: "",
        lowPrice: ""
        ,areaName:""
      }
    },
   getData(data){
       console.log("data",data)
       
       this.form.cityId=data[0]
       this.form.areaId=data[1]
       const url = '/area/findById?areaId='+this.form.areaId
      this.$axios.post(url).then(res=>{ 
        
         this.form.areaName=res.area.name
         this.form.cityName=res.area.cityName


        
      }).catch(err=>{
         this.$message.error("获取数据失败")
      })

   },

    onSubmit() {
      this.loading=true
        console.log("this.form",this.form)
        const url="/cinema/add"
        this.$axios.post(url,this.form).then(res=>{
          this.$message.success("添加数据成功")
              this.loading=false
            console.log(res)
        }).catch(err=>{
            this.$message.error('错误啦',err)
             this.loading=false
           console.log('错误啦',err)
        })
      console.log("submit!");
    }
  }
};
</script>
<style lang="less">
.cinema-Add {
  .el-card__body {
    height: 85vh;
  }
}
</style>
<style lang="less" scoped>
.el-form {
  width: 500px;
}
.header {
  font-size: 22px;
}
</style>